<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      :header-cell-style="tableHeaderStyle"
      :row-class-name="tableRowClassName"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        label="模块"
        width="180"
      >
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checkAll" :indeterminate="scope.row.isIndeterminate" @change="checked=>handleCheckAllChange(checked,scope.row.arr,scope.row.id)">全选</el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div v-if="scope.row.address">
            <el-checkbox-group v-model="scope.row.checked" @change="checked=>handleCheckedCitiesChange(checked,scope.row.arr,scope.row.id)">
              <el-checkbox v-for="(item,index) in scope.row.arr" :key="index" :label="item">{{ item }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>

export default {
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      checkedCities: [],
      tableData: [{
        id: 3,
        date: '2016-05-01',
        name: '王小虎a',
        isIndeterminate: false,
        checkAll: false,
        children: [{
          checkAll: false,
          checked: [],
          id: 31,
          isIndeterminate: false,
          date: '2016-05-01',
          name: '王小虎b',
          address: '上海市普陀区金沙江路 1519 弄',
          arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 41, 24, 66, 99, 111, 112, 113, 114]
        }, {
          id: 32,
          checkAll: false,
          checked: [],
          isIndeterminate: false,
          date: '2016-05-01',
          name: '王小虎c',
          address: '上海市普陀区金沙江路 1519 弄',
          arr: [10, 20, 30]
        }]
      },
      {
        id: 8,
        date: '2016-05-01',
        name: '王小虎a',
        isIndeterminate: false,
        checkAll: false,
        children: [{
          checkAll: false,
          checked: [],
          id: 38,
          isIndeterminate: false,
          date: '2016-05-01',
          name: '王小虎b',
          address: '上海市普陀区金沙江路 1519 弄',
          arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 11, 12, 13, 41, 24, 66, 99, 111, 112, 113, 114]
        }, {
          id: 39,
          checkAll: false,
          checked: [],
          isIndeterminate: false,
          date: '2016-05-01',
          name: '王小虎c',
          address: '上海市普陀区金沙江路 1519 弄',
          arr: [10, 20, 30]
        }]
      }]
    }
  },
  methods: {
    handleCheckAllChange(val, arr, id) {
      if (val) {
        this.tableData.filter(item => {
          if (item.id === id) {
            if (item.children) {
              item.children.filter(item => {
                console.log(item)
                item.checkAll = true
                item.checked = item.arr
              })
            }
          }
          if (item.children) {
            item.children.filter(item => {
              if (item.id === id) {
                item.checked = arr
              }
            })
          }
        })
      } else {
        this.tableData.filter(item => {
          if (item.id === id) {
            if (item.children) {
              item.children.filter(item => {
                console.log(item)
                item.checkAll = false
                item.checked = []
              })
            }
          }
          if (item.children) {
            item.children.filter(item => {
              if (item.id === id) {
                item.checked = []
              }
            })
          }
        })
      }
    },
    handleCheckedCitiesChange(value, arr, id) {
      const isAll = this.isContainArr(value, arr)
      if (isAll) {
        this.tableData.filter(item => {
          if (item.children) {
            item.children.filter(item => {
              if (item.id === id) {
                item.checkAll = true
              }
            })
          }
        })
      } else {
        this.tableData.filter(item => {
          if (item.children) {
            item.children.filter(item => {
              if (item.id === id) {
                item.checkAll = false
              }
            })
          }
        })
      }
    },
    isContainArr(parent, child) {
      return child.every(item => {
        return parent.some(v => {
          return item === v
        })
      })
    }
  }
}
</script>

